Copyright: Copyright (c) 1996, Ulead Systems


Creating backgrounds: Overview
Backgrounds: Overview

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		A single line in your HTML document fills your web page with an image that appears behind the text and other graphics. But wait a minute! A graphic THAT big must take forever to download, right? Well, surprise, it doesn't have to. Just tile a small image and you can fill a page of any size in an instant. PhotoImpact offers different ways to create great backgrounds.   Custom Magic     [image]  Textures         [image]  Logos


Welcome to PhotoImpact with WebExtensions
Welcome

Welcome What is PhotoImpact with WebExtensions? What's The Web for? Obtaining images Enhancing images		Welcome to PhotoImpact with WebExtensions help. In addition to this introduction, this document contains these sections to help you learn. Using PhotoImpact with WebExtensions Offers instruction on completing single tasks. It also contains several tips you can use when creating web images. Understanding Explains imaging with PhotoImpact with respect to the WWW. Reference Describes the Web menu commands and dialog boxes. It also has an advice section.


What is PhotoImpact with WebExtensions
PhotoImpact With WebExtensions

Welcome What is PhotoImpact with WebExtensions? What's The Web for? Obtaining images Enhancing images		Images for the web just got a lot easier now that you have PhotoImpact with WebExtensions. From conceptualization to creation, you have it all right here in one menu. This complete imaging package is loaded with features to make creating and reading web pages easier than ever.


Enhancing images

Welcome What is PhotoImpact with WebExtensions? What's The Web for? Obtaining images Enhancing images		After you have obtained your desired images, you are sure to want to add your own personal touch to them for added appeal. This is where PhotoImpact shines with its diverse, powerful, and easy to use tools, effects, and filters. Look at the image below to see some of the things you can do with the EasyPalette in one or two clicks. Then check out the procedures section for suggestions to help you edit your images effectively.


Obtaining images

Welcome What is PhotoImpact with WebExtensions? What's The Web for? Obtaining images Enhancing images		One of the biggest strengths of PhotoImpact is that it offers you practically unlimited resources for obtaining images. You can scan them in from photographs, books, and other printed materials with any TWAIN device. You can shoot images using a digital camera and connect it to your computer with an interface cable and TWAIN device. You can capture images from the screen using PhotoImpact Capture. You can use PhotoImpact CD Browser to find Kodak PCD images and then edit and convert them to GIF, PNG, or JPEG images for The Web. You can take images from any of over 35 vector, bitmap, and metafile image formats and edit and save them as GIF, PNG, or JPEG image for The Web. And don't forget that you can download an almost unlimited quantity of images from The Web for your own pages also. No matter where you are getting your images from, PhotoImpact offers the tools and flexibility for perfecting your images for The Web.


Editing & Coding

Creating Editing & Coding Tips on...		Cropping   Resizing   Placing and spacing objects    Using Guided Workflow to create images    Creating Image Map Tags    Creating shadows   Basic shadows   Simple halo   Diffused halo   Creating low resolution bitmaps for your images


Tips on...

Creating Editing & Coding Tips on...		Here are some ideas you can use when creating images for web pages.   Image sizing   Data type & formats   Meaningful images   Backgrounds   Transparency


Understanding

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		This section explains some basic concepts about images on the WWW and how they apply to PhotoImpact with WebExtensions. By giving you an overview of the tools included in this package, you can then decide where to start and how to work more effectively and efficiently on your web images.


Shadows: Overview

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		To make images on web pages look their best, add some shading to them. Shadows add depth and dimensions to otherwise flat images. If you surf around, you will find them to be one of the most prevalent features in good web page images. Although it sounds simple, it is one of the hardest imaging techniques to master. Click below to see how to do them.        Basic shadows  [image]  Simple halo       [image]  Diffused halo


Gradient fills

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		You probably won't have much call for gradient fills on your web pages; they are usually used in images that would probably be too large or demand too high a resolution. But when you do need them, PhotoImpact offers you the greatest flexibility of how to create them and still minimize file size: Color Ramp Select how colors shift in your gradient. Styles Choose linear, elliptical or rectangular fill patterns Magic Gradients Create outstanding backdrops for your images with unique gradients such as star burst, highway, swirls, and others. SmartSaver Make your images smaller and still look their best.


Advice

Web Menu Dialog boxes Advice		Here are other tidbits to help you understand and use PhotoImpact with WebExtensions in the most efficient way.   Data types & formats   Image size   Meaningful images   Keep your first page short   Copyright cautions


Image size
Image size Control your image sizes! Remember, your image is only good if it gets seen by the people visiting your site. Keep in mind that even though faster modems and ISDN phone lines are allowing data to flow faster, it still takes time to show an image. Experienced web travelers are becoming less patient with pages and sites that take forever to appear. So, keep your images small and optimize them using Ulead PhotoImpact SmartSaver.
Also consider the screen size. You may be running at 1024 x 768, True Color, but your visitors probably aren't. Assume that everyone that looks at your home page is doing it with a screen resolution of 640 x 480. Make sure your images fit within those limitations.


Meaningful images
Meaningful images Is a picture worth 1000 words? Actually, it might be worth a whole lot more...in terms of file size. And that means they take longer to load and use up valuable real estate on the screen. Make sure your images add more than just color to your pages.  The biggest mistake Web authors make is trying to be too splashy with their images. Instead of inviting their visitors to read on, people get incredibly frustrated waiting for all the images to appear.
Remember, the key to good graphics is to look cool and enhance understanding at the same time. If you achieve one without the other, you haven't achieved anything. Nothing motivates your visitor to travel elsewhere more than a web page that takes forever to download or is impossible to read. So be smart; think before you decide to place an image. And then think again.


Using Guided Workflow to create images

When you are in a hurry, PhotoImpact has a unique feature to make obtaining and enhancing your images quick. Let The Guided Workflow Tools™ in the Standard toolbar take you through all the essential steps for acquiring and enhancing an image:

1.	First, click [image] to import an image from any printed source.

2.	Then click [image] and choose the automatic enhancements to fix up the image. Is there an unwanted border? Auto-Crop will get rid of it. Did you scan the image a bit crooked? Auto-straighten will align it properly. Is the image too dark? Auto Brightness can bring it back to life. And there are other options too, such as Auto-remove moiré and Auto-contrast.

3.	Click [image] to balance the colors.

4. 	Click [image] to make the image more vivid.

5.	Click [image] to open the EasyPalette and apply any special effects or filters to the image.

6.	Click [image] to finish off the image by adding a frame and shadow.

7.	Finally, use Ulead PhotoImpact SmartSaver to save your image.


Creating shadows: Basic

This is your standard type of shading and can be done incredibly quickly in PhotoImpact.

1. 	Select the area on the image that you want to have a shadow.

2. 	Right click on the image and choose “Convert to Object” from the pop-up menu. The selection is now an object floating above the image.

3. 	Right click on the image and choose “Add Shadow” from the right mouse button pop-up menu. The Add Shadow dialog box appears.

4. 	Check the first Direction radio button and ensure that the X and Y Offset values are set at 10 pixels. Also make sure that the Transparency is set to 50% and that Edge Blending is set to 10.

5.	Choose a color for the shadow by clicking on the Color square.

6. 	Click OK. The dialog box closes. PhotoImpact creates a shadow object and groups it with the previous object.

7.	Right click on the image and choose "Merge All" to merge the objects with the base image.

 Creating shadows: Simple halo

 Creating shadows: Diffused halo


Creating shadows: Simple halo

This creates a shadow of equal diffusion.

1.	Open the EasyPalette and select the Object Library.

2.	From the Object Library menu, check Store Image.

3. 	Select the area on the image that you want to give the halo shadow and drag it to the Object Library. (You will use this later to add to the halo shadow.)

4. 	Return to the image and select a painting tool.

5.	From the Effect menu, choose “Paint on Edges”.

6. 	Now drag the previously stored object from the Object Library back onto the image. It falls in the exact same place it was taken from, with the halo shadow appearing behind it. To better merge this object and the shadow, you can blend the edges of the object using the Object properties dialog box.

 Basic shadows

 Creating shadows: Diffused halo


Creating shadows: Diffused halo

1.	Open the EasyPalette and select the Object Library.

2.	From the Object Library menu, check Store Image.

3. 	Select the area on the image that you want to give the halo shadow and drag it to the Object Library. (You will use this later to add to the halo shadow.)

4. 	Right click on the image and choose “Soften” from the pop-up menu. The Soften dialog box opens.

5. 	Enter 20 as the Soften width and click OK. The dialog box closes and the selection marquee changes to reflect the new soft edge.

6. 	Select a painting tool and paint over the entire selection. Notice how the areas around the softened edge appear more diffuse.

7. 	Now drag the previously stored object from the Object Library back to the image. It falls in the exact same place it was taken from, with the halo shadow appearing behind it. To better merge this object and the shadow, you can blend the edges of the object using the Object properties dialog box.

  Basic shadows

  Creating shadows: Simple halo


Magic Texture Tile Size Cross Reference

Use this table to find the tile size for a magic texture you wish to use as a background. If you intend to do a lot of backgrounds, print this page out and keep it as a handy reference.

Note: These textures are located in the Magic tab of the Texture Gallery. PhotoImpact Album also contains an album of all these textures named Magic Textures.

Texture	Width	Height	Texture	Width	Height	Texture	Width	Height
1	200	200	37	54	180	73	60	60
2	182	203	38	70	70	74	120	60
3	160	160	39	140	70	75	88	44
4	84	84	40	196	70	76	132	66
5	150	150	41	196	70	77	66	66
6	175	175	42	140	200	78	60	60
7	160	160	43	112	112	79	84	35
8	80	120	44	108	108	80	72	30
9	120	120	45	72	72	81	72	72
10	168	168	46	72	72	82	21	21
11	128	128	47	160	160	83	40	40
12	96	96	48	40	40	84	40	40
13	105	175	49	150	150	85	40	40
14	7	140	50	100	100	86	40	40
15	160	160	51	60	60	87	80	160
16	80	80	52	45	45	88	32	128
17	60	60	53	60	60	89	120	120
18	150	150	54	60	60	90	120	120
19	36	150	55	120	120	91	192	96
20	36	180	56	120	120	92	260	140
21	50	50	57	120	120	93	280	105
22	50	150	58	80	80	94	200	200
23	140	140	59	70	70	95	200	368
24	210	210	60	70	70	96	241	50
25	7	210	61	150	150	97	200	200
26	4	50	62	100	100	98	132	66
27	66	66	63	140	140	99	200	200
28	160	160	64	160	80	100	200	200
29	160	160	65	160	100	101	200	200
30	20	48	66	140	140	102	40	40
31	20	48	67	140	140	103	108	72
32	64	96	68	56	56	104	120	120
33	160	160	69	64	64	105	120	120
34	20	100	70	56	56	106	210	210
35	100	120	71	150	150
36	108	108	72	24	48


Keep your first page short
Keep your first page short Probably the biggest cause of home pages not being read is that they take too long to load. Write your home page so that it can load quickly. Include only information and images you consider essential for engaging your visitors and motivating them to explore more. Try to minimize the amount of scrolling they have to do early on. If they do not see what they are looking for quickly, they will probably look elsewhere.


Copyright cautions
Copyright cautions If you scan images from printed material for publishing on the web, make sure the creator has given permission for you to use, and/or alter the image for your use. When you travel the web, you will come across an endless supply of images. Most web pages will state whether you may use the images on those pages. If no statement exists, try contacting the author to ask for permission before you start using the image.
Above all, NEVER assume that no copyright exists on any material you find on The Web. Unless you have explicit permission to use what you found in your own documents, don't.


Data type and format tips

Always use the progressive option when saving JPEG files. Not only does this usually make the image smaller, but it also allows your visitors to get an idea of the image's appearance faster.

Consider whether you want the entire image to load faster or give an idea of the image content faster when deciding whether to interlace GIF images. Interlacing makes GIF files load more slowly, but allows your visitors to get an idea of the image content faster. (Note: Studies have found that even though Interlaced GIF load more slowly, people perceive them as being faster.)

If you have a GIF that needs fewer than 256 colors, consider using GIF SmarSaver to customize the palette to make it smaller and allow the image to load faster.


Meaningful images tips

Use buttons to point out areas to click on to go to another page.

Use a nice logo or image to give your page or topic visual identity.

Create backgrounds to add texture to your page.

Use a mapped image to centralize the navigation aides on your page.

Use a simple image to give your visitors a preview or idea of things to come.


Backgrounds tips

Keep your backgrounds light. Use the Brightness and Contrast command or color controls to make high contrast and bright images more suitable for placing under the text.

Remember, you want your visitors to READ the text on your page. Don't make your background image so strong that it distracts the reader.


Transparency tips

Use the Magic Wand and Mask Brush to define transparent areas for your images.

Try adding a soft edge around the borders of your transparent area to blend the image more smoothly into the background.

Make sure all your transparent bitmaps have the same transparent color.

For best results, define the background color of your web page to be the same as the transparent color for your image.   (Sample Code:  <BODY BGCOLOR="#000000> )

To create transparent area for use in multiple images, create the area and then save it with the Save Selection command in the Edit menu.


Resume
	Name: Ian McClure Age:  30 Nationality: Canadian Address:  1920 Galt Ave., Sherbrooke PQ, Canada Education: B.A Sherbrooke U. Languages:  French, Hebrew, English Experience Company: Dominion Goods Limited Duties: As head data-entry clerk my duties included writing the company newsletter, inputting sales and marketing figures, creating spreadsheets, taking inventory every month, and managing a team of three data-entry clerks.


Family Page
	Our Family Home Page Welcome to the Kimball family home page! To find out about our family history, click here. This home page is updated regularly and contains stories about family members around the world.  If you would like to find out about your family history, click here to register. Family News The Third Annual Family BBQ Johnny Got Into Upstate University Laura's Getting Married!


Newsletter
	AUTONEWS Welcome to this month’s edition of AutoNews, the complete guide to buying, selling, and maintaining your car. Don’t miss the Hot Tips section where everything you need to know about engine care, body repair, fuel efficiency and more is available at your fingertips. In past issues we’ve featured articles by our readers such as “Snow Tires: Myth and Reality”, “Life and Times of Henry Ford”, and “Car Songs of the Fifties”. This month's feature looks at safety standards in the car industry.  Detroit and Japan: Safety Issues  Departments Hot Tips Classic Corner FAQ Reader's Forum Automobile Maintenance Test drive the Jupiter 8 here!


Real Estate
	A quiet stroll on the beach at night, or maybe a quick hike up the mountain before breakfast -- whatever your pleasure, we’ve got it! Over one thousand dream homes in exotic locales around the world! Take a look at our selection of exquisite homes in our Dream Realty Showroom. To view a home just click below. You'll see information about property taxes and values, tourists spots and scenic routes, and more! Country Cottage . . Seaside Retreat Olde Castle . . Family Home Hunting Lodge . . Skiing Getaway Click here to arrange a personal visit


Art Display
	Welcome to the Midwest Gallery! Feel free to browse around any section of the gallery and check out the archive and chat rooms for information on upcoming and past exhibitions. To view or download an image, click on the one you want. It might take a few minutes depending on your connection speed. JPEG (20 KB) TIFF (900 KB) JPEG (19 KB) TIFF (850 KB) Click here to register as one of our patrons. We'll send you regular updates of new acquisitions and interesting articles about our museum history and its art.


Cropping: before and after

Before	After


Resizing: Before and after

Before	After (50%)


What's The Web for?

Welcome What is PhotoImpact with WebExtensions? What's The Web for? Obtaining images Enhancing images		The World Wide Web offers you one of the greatest opportunities that ever existed to make your message known to a wide audience. Here are some of the things you can do on The Web: Resumés Don't just mail your resumé out, let potential employers come to you! Family Home Page Keep friends and relatives informed by giving them your home page address. Now you only need to write once to reach many! Newsletters Save printing and mailing costs by putting your newsletter on line. Real Estate Give potential home buyers a grand tour of your best properties without requiring them to leave their homes. Museum Pieces Show and share your favorite artwork and collectibles with others.


Data types & formats
Data types & format  Choose the proper data type and format for the images on your pages. For showing photographs, JPEG is probably the best format to use. It supports True Color and offers good compression. For placing icons, logos, or other simple "hand-drawn" images, GIF is better. It only allows you to use up to 256 colors which is often enough, and with its transparency features, you can seamlessly blend images into your documents.
For best consistency when displaying GIF images, try using the standard palette for Netscape. This reduces your palette down to 216 colors, but it ensures that all images on your screen appear consistently and saves a little download time.
For fastest downloads, consider using optimized palettes. This allows you to use a palette with fewer colors which enhances compression. Thus images download faster.


Creating backgrounds: Custom Magic

The Background designer in the Web menu allows you to create an almost unlimited number of unique textures for use as backgrounds. Here's how:

1.	Open or create a True Color 72 dpi image that is at least 320 x 240 pixels in size. (This is your testing image.)

2.	Drag the image to the top left corner of the workspace.

3.	Click the Text tool and add four 2D text objects to your image. (Use a font size of about 18 point.)

4.	Format the fonts as follows:

Make the first one the same color as your standard text.

The second should be the color of new links.

The third should be the color of visited links.

The last should be the color of active links.

5.	From the Web menu, choose Background Designer.

6.	Select Create a new tile and enter the Cell size for your image. For best performance on web pages, make sure that the maximum number of pixels for an image intended for a background is 10,000 (ex. 100 x 100) for GIFs and 40,000 (ex. 200 x 200) for JPEGs.

7.	Choose the basic colors for your background by shifting the hue and/or clicking Edit Palette.

8.	Select a Background pattern and pattern Mode combination that creates the kind of effect you are looking for. You can get a good idea of the results from the preview window.

9.	Select Create new image and click OK.

10.	If necessary, use the Quick Color Controls to adjust the background. If you have dark text, reduce the amount of contrast and increase the brightness of the newly created image. If you intend to use light text, reduce the contrast and brightness.

11.	When you think the background is ready for your web page, right click on it and choose Select All.

12.	Press "T" and drag the image to the image you created in step one to see how text will look over the background.

13.	If everything looks OK, click the image you created in step 8 and from the Web menu, choose SmartSaver:JPEG.

14.	Optimize the image and save it.

  Creating backgrounds: Textures

  Creating backgrounds: Logos

  Creating Body Tags

  Adding text to an image


Creating backgrounds: Textures

The Magic tab of PhotoImpact's Texture Gallery contains over 100 unique patterns that you can use for backgrounds in your web pages. Here's how:

1.	Open a new 72 dpi True Color image with dimensions greater than or equal to 640 x 350. (This is your test image.)

2.	Drag the image to the top left corner of the workspace.

3.	Click the Text tool and add four 2D text objects to your image. (Use a font size of about 18 point.)

4.	Format the fonts as follows:

Make the first one the same color as your standard text.

The second should be the color of new links.

The third should be the color of visited links.

The last should be the color of active links.

5.	Open the Texture Gallery from the EasyPalette and click the Magic tab.

6.	Find the texture you wish to use as a background and drag it to the image.

7.	Look up the tile size for the selected texture in the Magic Texture Tile Size Cross Reference. (Click below.)

8.	If necessary, use the Quick Color Controls to adjust the background. If you have dark text, reduce the amount of contrast and increase the brightness of the newly created image. If you intend to use light text, reduce the contrast and brightness.

9.	Click the Standard Selection tool and enter the tile size from step 6 in the Fixed Size boxes in the Attribute toolbar.

10.	Click in the image where you want the top left corner of your texture to begin. Then drag the selection to an empty spot in the PhotoImpact workspace.

11.	Right click on the new image and choose Merge.

12.	If the standard tile size is too large for effective use as a background, from the Format menu, choose Dimensions. In the Dimensions dialog box, define the new size for the tile.

13.	Right click on the image and choose All.

14.	Press "T" and drag the corrected image back to the original.

15.	If everything looks OK, click the image created in step 11 and from the Web menu, choose SmartSaver:JPEG.

  Creating backgrounds: Custom Magic

  Creating backgrounds: Logos

  Creating Body Tags

  Custom Texture Tile Size Cross Reference


Creating backgrounds: Custom;Neat stuff;Creating;Fancy;Procedures
Creating backgrounds: Logos

You may want to fill your background with an image you created, such as a corporate logo, a curtain, or your pet turtle.  Here's how:

1.	Open the image you wish to tile as a background and convert it to True Color, 72 dpi. (Remember, this image must be tileable to produce good results.)

2.	From the View menu, choose Photo Properties to find out the image size.

3.	If necessary, from the Format menu, choose Dimensions and resize the image to make it smaller.

4.	If necessary, use the Quick Color Controls to adjust the background. If you have dark text, reduce the amount of contrast and increase the brightness of the newly created image. If you intend to use light text, reduce the contrast and brightness.

5.	If you wish to shift the starting point of your background, from the Web Menu, choose Shift Image and in the resulting dialog box set the offset. The preview window displays your background sample.

6.	Open or create a True Color 72 dpi image that is at least 320 x 240 pixels in size. (This is your testing image.)

7.	Drag the image to the top left corner of the workspace.

8.	Click the Text tool and add four 2D text objects to your image. (Use a font size of about 18 point.)

Make the first one the same color as your standard text.

The second should be the color of new links.

The third should be the color of visited links.

The last should be the color of active links.

9.	Right click on the image from step 5 and choose All from the popup menu.

10.	Press "T" and drag the original image to the image you created in step 6 to see how text will look over the background.

11.	If everything looks OK, click the image from step 5 and from the Web menu, choose SmartSaver:JPEG.

  Creating backgrounds: Custom Magic

  Creating backgrounds: Textures

  Creating Body Tags


Cropping

To crop means to remove any excess areas of an image that you do not want to display or have no interest in retaining. Apart from keeping only the subject of your image in view, cropping also helps reduce file size making your images display quicker over the web.

1.	Use the selection tools to select the area you want to keep.

2.	Press Ctrl+R or choose Crop from the Edit menu.

Any parts of the resulting image that were not part of the original selection that remain are filled with the current background color.

Note: When converting indexed-color images to the JPEG format, it is better to crop borders to avoid unnecessary emphasis on unimportant part of the image because of how the JPEG compression scheme works.

Before and after


Resizing

Although you can use HTML code to size images on your web pages, a better way to make images appear the way you want them to is save them at the correct size. Resizing the actual image instead of having the web browser do it offers two distinct speed advantages: First, by making the image physically smaller, (reducing the number of pixels it contains), the file size becomes smaller. Second, the web browser does not need to calculate the corrections to make in order to display the image properly.

Resizing may also be useful for linking small images to larger counterparts to save download times for your pages.

This procedure explains how to reduce an image to half of its original size.

1. 	Open the image you want to resample and from the Format menu, choose “Dimensions.”

2. 	Select User Defined, and ensure that the Unit combo box is set to Percent and that Keep Aspect Ratio is also checked, and then type 50% in the Width combo box. The height also changes while the Preview image changes accordingly. (If you want the image to fit within an exact size, such as 120x240, then set the Unit to pixels and type in the respective pixel values in the Width and Height combo boxes.)

3. 	Click OK. The dialog box closes and PhotoImpact resizes the image.

Note: Remember that resizing images with the Dimensions command alters data. If you make the image smaller, some image data is irretrievably lost. PhotoImpact adds information to an image when you increase the dimensions.

Before and after


Creating Image Map Tags

Image maps allow you to link to many pages using an attractive, convenient, and compact graphical navigation system. This not only makes your web pages more interesting and appealing to your readers, it also allows you to include more information in each document.

To find out the coordinates for mapping your images:

1. 	Open the image you want to map and using any of the selection tools, create a contiguous selection of a single area you wish to map.

2.	From the Web menu, choose Image Map Tag.

3.	Select the format you use for image maps in your HTML documents.

4. 	Type the URL for the selected area in the URL text box.

5. 	Click Copy to Clipboard.

6.	Switch to the HTML document where you want to place the map and paste the clipboard contents into it.

7.	Repeat these steps for each area of the image you wish to make hot. (Note: for best results work from the top left region across and down the image, making sure that none of the mapped regions overlap.


Adding text to an image

Text in web images may be the most important feature of any graphic, as it states clearly (in most cases) what the graphic represents and also sets to establish the identity of your Web site by its use of font and style. In PhotoImpact, you have incredibly powerful tools that allow you to not only create text, but to shape it in any way you like.

1. 	Select the Text tool.

2. 	Move to the image where you want to apply the text and click. The Text entry box appears.

3. 	Enter in the text that you want to appear on the image and click OK. PhotoImpact applies the text to the image.

4. 	In the Attribute toolbar, specify the correct style that you want for your text. (PhotoImpact automatically updates the text.)

5. 	In the Attribute toolbar, change the Mode to Path. Control points appear on each corner of the text block.

6.	Drag the control points to change the text shape. You can drag freely on any control point to create any type of shape.

7.	Change the color fill settings for the text according to your needs. Right click the color square to see the Ulead Color Picker menu, which offers Gradient and Texture fills in addition to the standard colors.

8. 	Change the Mode to the type of object you wish to create. PhotoImpact fills the text with the color shown in the text color box in the Attribute toolbar.

9.	If necessary, change the lighting and border settings to enhance 3D text effects.


Creating low resolution bitmaps for your images

Give your visitors a quick glimpse of your images by loading a low resolution image before the high resolution image loads. This gives the appearance of your page downloading faster. It also offers your visitors a way to quickly decide whether to wait for the image to fully develop.

1.	Select the image you want a low resolution copy of and save it.

2.	From the Web Menu, choose HTML Image Assistant and click the Image tab.

3.	Click Low Res.

4.	Select a data type and physical size for the image and click Save.

5.	Click Copy to Clipboard to copy the Image tag for the full resolution and its low resolution counterpart to the clipboard.

6.	Switch to the HTML document for this image and paste the clipboard contents into it.

Creating Body Tags

Creating Image Tags


Image sizing tips

Remember to design your pages for the most common screen size used by web browsers. You may be running at 1024 x 768, True Color, but your visitors, most likely, are not. Many people still use a screen resolution of 640 x 480.

True Color is nice, but a lot of your visitors may still be using 256-color displays. Keep this in mind when you do your images.

Try to use indexed color instead of True Color for your images.

If you don't need 256 colors, use a smaller custom palette. The GIF SmartSaver makes it easy to find the perfect palette.

Don't use HTML code to size images on web pages. Use the Dimensions command in the Format menu to edit the image to its proper on-screen dimensions. This enables the images to appear faster because the web reader does not need to calculate and resample the images while downloading.

Use the PhotoImpact SmartSaver to save your image files.


Select one of the preset buttons from the Samples list below the Preview window to obtain all the settings for the type button you want. You can still fine tune the button before closing the dialog box.


Placing and spacing objects

You can automatically arrange objects in an image based on a single object or on the two outer objects:

Single object

1.	Select the object you want to place closest to the top left corner of the image and place it where you want it.

2.	Select all objects you wish to rearrange.

3.	From the Web menu, choose Align Objects. From the submenu, choose how to align the objects.

4.	From the Web menu, choose Space Evenly.

5.	Check Fixed and enter a value in pixels to separate each object by. Note: You can assign a negative value for the number of  pixels to adjust the distance between the objects. A zero value gives each object a distance of 5 pixels from each other.

6.	Check which direction you want to arrange the objects in and click OK.

Outer Edges

1.	Select the object you want to place closest to the top or left corner of the image and place it where you want it.

2.	Select and place the object to be closest to the lower or right corner.

3.	Select all objects you wish to rearrange.

4.	From the Web menu, choose Align Objects. From the submenu, choose how to align the objects.

5.	From the Web menu, choose Space Evenly.

6.	Check the direction you want to arrange the objects in and Even, then click OK.


Don't use buttons or icons that are protected by a copyright. If you are unsure whether it is legal to use an image created by someone else, don't use it.


You can create ellipses, diamonds, rectangular, and rounded rectangles using this command.


Bevel is usually the best.


Set your default background color to closely match the dominant color of your background image.


Good web designers always include an Alt tag attribute for viewing in web browsers that are set not to display images.


Creating Body Tags

Create all the HTML code for your Body Tags statements at one time without worrying about typos or other mistakes using the HTML Image Assistant command in the Web Menu. A preview screen in the dialog box shows how your page will look without requiring you to use your web browser to view it.

1.	From the Web Menu, choose "HTML Image Assistant."

2.	Click the color square to select the default background for your page.

3.	Click Browse to select a background image.

4.	If you want to use colors for your text and use standard colors, clear the check boxes for the associated type.

5.	Click To Clipboard to copy the Tag information to the clipboard and be able to paste it in your HTML document.

  Creating Image Tags

  Creating low resolution bitmaps for your images


Creating Image Tags

Easily create Image Tags with the HTML Image Assistant command in the Web Menu. You can explicitly define image sizes when displayed and automatically create and include low resolution images for your more detailed or larger images.

1.	From the Web Menu, choose "HTML Image Assistant."

2.	Click the Image tab.

3.	Click Browse to load a source image into the dialog box.

4.	In the Destination group, set any web page constraints for displaying the image.

5.	Click Low Res to create a low resolution image and its Tag.

6.	Set the low resolution options as desired.

7.	Click Save and save as a GIF or JPEG image.

8.	Click OK to return to the HTML Image Assistant dialog box.

9.	Click To Clipboard to copy the Tag information to the clipboard and be able to paste it in your HTML document.

  Creating Body Tags

  Creating low resolution bitmaps for your images


Add Sample dialog box

Saves the current dialog box settings in the My Gallery of the EasyPalette for future use.

Preview Window Shows the image that will appear in the My Gallery.

Name Enter a name for this filter setting that will remind you of what it does or when to use it.


Preview

Shows how PhotoImpact will change the image if you accept the current filter settings. The Preview Options window appears at the lower right corner offering these options:

OK Accept the change and continue editing.

Cancel Don't apply this filter to the image and return to editing.

Undo / Redo Compare before and after affects on the image.

Continue Return to the filter dialog box to adjust the settings more.


Style Gallery

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		If you want a one stop, no fuss editing shop, then the Style Gallery is just for you. Here you can drag-and-drop effects, styles, textures and gradients to any image, instantly enhancing it. No fine tuning and pixel-level adjustments are needed here, simply use the “Pick-and-Apply™” feature of our program. To your left are some examples of what you can create using the Style Gallery.


Effects and filters

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		Add extra flair and feeling to your images with the  wide range of effects and filters PhotoImpact offers. They are easy to use because you always have a preview of what will happen next before you apply any change. PhotoImpact offers you two ways to apply effects and filters. All of them are available from the Format or Effect menu, but a better way to do it is to use the EasyPalette. The EasyPalette contains a huge number of preset effects and filters in its galleries. Each gallery provides thumbnail images portraying how the change will affect you image. And by clicking the Try! button, you can replace the default EasyPalette thumbnails with one of your current image. And the My Gallery allows you to add new settings to the EasyPalette for future use. Enhancing your images was never easier.


Placing a background into an HTML document

Use the <BODY BACKGROUND> tag at the beginning of your HTML document to place a background.

For best results, set the background color to match the background color of the image you are using. Here is an example:

<BODY TEXT="#FFFFFF" BGCOLOR="#000000 BACKGROUND= /images/bckgs/texture/mybkg.gif>


Shift Image

Shifts the image so that the top left corner starts somewhere in the middle of the image. This is useful when you want to use a logo or image as a tiled background but do not want the logo to appear as if it starts from the upper left corner of your web page.


Align Objects

Works with the Space Evenly command to help you place selected objects relative to each other in an image. This is particularly useful when designing images intended to have image maps associated with them.

Top Aligns all objects with the top of the object that is closest to the top of the image.

Bottom Aligns all objects with the bottom of the object that is closest to the bottom of the image.

Left Aligns all objects with the left edge of the object that is closest to the left edge of the image.

Right Aligns all objects with the right edge of the object that is closest to the right edge of the image.

Center Horizontally  Aligns all objects horizontally with the center of the object that is in the middle of the image.

Center Vertically  Aligns all objects vertically with the center of the object that is in the middle of the image.

  Placing and spacing objects


Space Evenly

Allows you to arrange selected objects in the image so that each is separated by the same distance. Use this command with the Align Objects to place buttons and other objects in images intended for use with image maps.

Note: You must have three or more active objects to use this command.

  Placing and spacing objects


Image Map Tag

Allows you to create image map tags for HTML3, Cern, or NCSA image maps from the current selection area in your image.

  Creating Image Map Tags


Helper Program

Allows you to select and run additional web imaging software with Ulead PhotoImpact with WebExtensions.


Ulead PhotoImpact with WebExtensions comes with "mapthis.exe" as the default program to run from this command.


Shift Image dialog box

Change the upper left corner of the image so that it starts somewhere within the current image. This is useful if you wish to tile the image and wish the tiling to start from a place other than the top left corner.

Preview Window Shows a thumbnail view of the pattern you are creating.

x and y offset Type how far to shift the image in pixels.

Keep images small


Remember to keep images intended for tiling on web pages small. As a rule, the maximum total size for a 16-color GIF should be about 10,000 pixels. For a JPEG, about 40,000.


Space Evenly dialog box

Separate selected objects from each other by the same distance.

Direction Click Horizontally to arrange objects evenly across the image. Click Vertically to arrange then from top to bottom.

Space Click Even to anchor the two objects at either end and fit all other selected objects between them. Click Fixed to anchor only the top left object.

Distance Specify the distance, in pixels, between objects when spacing objects using the Fixed option.

Test Click to preview how the objects look like when you apply the settings.

Reset Click to move the objects back to their original position before testing and go back to the default settings.


Image Map Tag dialog box

Use a selection area to create an image map tag for your web pages.

Selection information Displays the type of shape you will create in the image map and its coordinates.

Format Click the format you want to use for your HTML document.

URL Type the location for the web page or other information you wish to link to the map tag.

Tag String View and edit the HTML code for the map tag.

To Clipboard Copy the information in the Tag string box to the clipboard. You can then paste the clipboard contents into your HTML document.

  Creating Image Map Tags


Creating buttons: Rectangular

Creating rectangular buttons is a snap with PhotoImpact's Button designer. All the tools you need are available in one place to create the simplest or fanciest buttons you can imagine.

1. 	Open or select a portion of an image to use for the button face.

2. 	From the Web menu, choose Button Designer.

3.	Select Inward if you want to limit the size of the button to the current image dimensions. Select Outward if you wish to add a border to the image. Note: You may only select Inward for the full-picture button style, (fourth Style choice).

4. 	Select the style you wish to use for your button.

5.	Type the size in pixels for the button border. Clear "Mirror" if you wish to set each border size independently.

6.	Select colors and their transparencies for the borders.

7.	Click OK.

Copyrights


Buttons: Overview

Understanding Shadows Backgrounds Buttons Effects and filters Style Gallery Gradient fills		Buttons are an important part of any web page. They provide quick and efficient access to information and are easily recognizable. With PhotoImpact, anything that you can think of can be a button.       Original Highlights Shading   Rectangular buttons


Creating

Creating Editing & Coding Tips on...		Creating backgrounds   Custom Magic   Textures   Logos   Rectangular   Creating Body Tags   Creating Image Tags   Creating low resolution bitmaps for your images   Using Guided Workflow to create images    Adding text to an image


Web Menu

Web Menu Dialog boxes Advice		The Web Menu contains commands that caters to your design, production and authoring needs for HTML home page development. It contains these commands. Click below for more information.   Background Designer   Button Designer   Frame Designer   Object Shadow Designer   Shift Image   Align Objects   Space Evenly   HTML Assistant   Image Map Tag   Helper Program


Web Menu dialog boxes

Web Menu Dialog boxes Advice		Background Designer   Button Designer     Frame & Shadow   Add Shadow   Shift Image    Space Evenly   HTML Assistant   Image Map Tag